<template>
      <div id="myGold">
          <!-- 头部 -->
          <my-header fixed title='我的金币' v-goTop:click='true'>
              <a class="back-black" slot='left' @click='$router.go(-1)'></a>
          </my-header>
          <!-- 正文 -->
          <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
              <div class="container" v-swiper:swiperRight='true'>
                  <div class="gold_box">
                     <div class="gold_box_num">
                       <span class="num">5000</span>
                       <span>金币</span>
                     </div>
                     <div class="gold_box_withdrawals">
                       <span>提现</span>
                     </div>
                  </div>
                  <div class="bg_line"></div>
                  <div class="gold_box_content">
                    <div class="gold_box_nav">
                        <div class="gold_box_nav_item" :class='{ gold_box_nav_active: active }' @click.stop='navTap(1)'>全部</div>
                        <div class="gold_box_nav_item" :class='{ gold_box_nav_active: actives }' @click.stop='navTap(2)'>收入</div>
                        <div class="gold_box_nav_item" :class='{ gold_box_nav_active: activess }' @click.stop='navTap(3)'>支出</div>
                    </div>
                    <div class="gold_box_detail">
                        <div class="gold_box_detail_title">
                          <span>发布文章</span>
                          <span class="time">2016-01-12</span>
                        </div>
                        <div class="gold_box_detail_num">
                          <span>+2</span>
                        </div>
                    </div>
                    <div class="gold_box_detail">
                        <div class="gold_box_detail_title">
                          <span>发布文章</span>
                          <span class="time">2016-01-12</span>
                        </div>
                        <div class="gold_box_detail_num">
                          <span>+2</span>
                        </div>
                    </div>
                    <div class="gold_box_detail">
                        <div class="gold_box_detail_title">
                          <span>发布文章</span>
                          <span class="time">2016-01-12</span>
                        </div>
                        <div class="gold_box_detail_num">
                          <span>+2</span>
                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
</template>
<script>
export default {
    name: 'myGold',
    data () {
        return {
          active: true,
          actives: false,
          activess: false
        }
    },
    methods: {
       navTap (index) {
         if (index === 1) {
           this.active = true
           this.actives = false
           this.activess = false
         } else if (index === 2) {
           this.active = false
           this.actives = true
           this.activess = false
         } else {
           this.active = false
           this.actives = false
           this.activess = true
         }
       }
    }
}
</script>
<style lang='stylus'>
#myGold {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    .content {
        position: relative;
        background: #f6f7fa;
    }
    .gold_box {
        background: #f34d4d;
        position: relative;
        width: 100%;
        height: 6rem;
        overflow: hidden;
        color: #fff;
        .gold_box_num {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 50px;
          .num {
            font-size: 40px;
            font-weight: 400;
          }
        }
        .gold_box_withdrawals {
           text-align: center;
           height: 33px;
           line-height: 33px;
           margin-top: 20px;
           span {
             border: 1px solid #fff;
             padding: 5px 30%;
             border-radius: 40px;
           }
        }
    }
    .bg_line {
        height: 0.4rem;
        background: #f5f5f5;
    }
    .gold_box_content {
        .gold_box_nav {
          display: flex;
          justify-content: space-around;
          line-height: 1.5rem;
          height: 1.5rem;
          border-bottom: 1px solid #f5f5f5;
          .gold_box_nav_item {
              width: 70px;
              text-align: center;
          }
          .gold_box_nav_active{
              border-bottom: 2px solid #f34d4d;
              color: #f34d4d;
          }
        }
        .gold_box_detail{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f2f2f2;
            padding: 10px 20px;
            .gold_box_detail_title {
              display: flex;
              flex-direction: column;
              .time {
                color: #8e8e8e;
                font-size: 13px;
              }
            }
            .gold_box_detail_num {
                span {
                   line-height: 38px;
                   height: 38px;
                   color: #5ba709;
                }
            }
        }
    }
}
</style>
